<template>
  <div>
    <el-dialog title='补单申请' :visible="showDialog" width="70%" :before-close="handleClose" :close-on-click-modal="false">
      <div class="content">
        <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="farmName" label="农场">
          </el-table-column>
          <el-table-column prop="teamName" label="生产队">
          </el-table-column>
          <el-table-column prop="orderWhy" label="补单原因">
          </el-table-column>
          <el-table-column prop="orderType" label="补单类型">
          </el-table-column>
          <el-table-column prop="status" label="状态" sortable>
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间" sortable>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" sortable>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-edit" circle size="mini"
                :disabled="scope.row.status == '通过' || scope.row.status == '通过待补单' || scope.row.status == '已补单'"
                @click="handleEdit(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle size="mini"
                :disabled="scope.row.status == '通过待补单' || scope.row.status == '已补单'"
                @click="handleDel(scope.row)"></el-button>
              <el-button class="addButton" type="primary" icon="el-icon-plus" circle size="mini"
                :disabled="scope.row.status == '待审核' || scope.row.status == '已驳回' || scope.row.status == '已补单'"
                @click="handleAdd(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <PageCom :page="pageData.current" :size="pageData.size" :total="total" @handleSize="handleSize"
          @handleCurrent="handleCurrent"></PageCom>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { tableApi, deleteApi, updateApi } from '@/api/orderMange'
import PageCom from '@/components/PageCom'
export default {
  props: ['showDialog'],
  components: {
    PageCom
  },
  data() {
    return {
      orderType: '',
      tableData: [],
      pageData: {
        current: 1,
        size: 10
      },
      total: 0,
      id: ''
    };
  },
  methods: {
    // 分页
    handleSize(size) {
      this.pageData.current = 1
      this.pageData.size = size
      this.getList()
    },
    handleCurrent(current) {
      this.pageData.current = current
      this.getList()
    },
    // 表格
    async getList() {
      let { data } = await tableApi({ orderType: this.orderType }, this.pageData)
      this.total = data.total
      this.tableData = data.records
    },
    handleClose() {
      this.id = ''
      this.$emit('update:showDialog', false)
    },
    async handleSubmit() {
      this.$emit('handleRefresh')
      this.handleClose()
    },
    // 新增
    handleAdd(row) {
      this.$emit('handleAdd')
      this.id = row.id
    },
    // 修改
    handleEdit(row) {
      this.$emit('handleEdit', row)
    },
    // 更新
    async handleUpdate() {
      if (this.id) {
        await updateApi({ id: this.id, status: '3' })
        this.getList()
      }
    },
    // 删除
    async handleDel(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let { code } = await deleteApi({ ids: [row.id] })
        if (code == 0) {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 3 * 1000
          })
        }
        this.getList()
      }).catch(() => {

      });
    },
  }
}
</script>

<style lang='scss' scoped>
.dialog1-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}

.content {
  height: 500px;
}

.page-page {
  text-align: left;
}

.cancel {
  border-radius: 5px;
  position: relative;
  line-height: 20px;
  text-align: center;
  font-size: 14px;

  &:hover,
  &:focus {
    background: rgba($color: #e8f4ff, $alpha: 1) !important;
    border: 1px solid #0e7b67 !important;
    color: #0e7b67 !important;
  }

}

.el-button--primary.is-disabled {
  background: #7ab6a3 !important;
  border-color: #7ab6a3 !important;
  color: #fff !important;
}

::v-deep.el-table th {
  font-size: 13px;
  background: rgb(101, 192, 175);
  color: rgb(255, 255, 255);
  height: 30px;
  padding: 0;
}

::v-deep.el-table--border td {
  height: 30px;
  padding: 0;
  font-size: 12px;
  color: rgb(87, 87, 87);
}

::v-deep .el-table .el-table__cell {
  padding: 2px 0;
}

::v-deep .el-table .cell {
  text-align: center;
}

::v-deep .el-table td.el-table__cell {
  border-bottom: none;
}
</style>
